<template>
  <ul class='tabbar'>
    <!-- 设备按钮 -->
    <li class='tabbar-item'
    v-for="item in tabList"
    :key="item.name"
        @click='goToPage(item.value,item.name)'
        :class='{ "add-animate": tabValue === item.value, "remove-animate": oldTabValue === item.value }'>
      <div class='child child-1'>
        <div class='tabbar-icon'>
          <img :src='item.img' v-show='tabValue != item.value'>
        </div>
        <div class='tabbar-label'>
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class='child child-4'>
        <div class='tabbar-icon'>
          <img  :src='item.imgOn' v-show='tabValue == item.value'>
        </div>
        <div class='tabbar-label'>
          <span>{{item.name}}</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import { PAGE_RISK, PAGE_TROUBLESHOOT, PAGE_DAMAGE,PAGE_FILES, PAGE_MONITOR, PAGE_ASSESS, PAGE_MAINTENANCE } from '@/utils/constant'

export default {
  props: ['roadId', 'deptTreeId', 'slopeId'],
  name: 'three-tabbar',
  computed: {
    tabValue () {
      return this.$route.name
    }
  },
  data () {
    return {

      oldTabValue: undefined,
      tabList: [
        {
          name: '基础档案',
          value: PAGE_FILES,
          img: require('../imgs/bar_tab7.png'),
          imgOn: require('../imgs/bar_tab7on.png'),
        },
        {
          name: '风险调查',
          value: PAGE_DAMAGE,
          img: require('../imgs/bar_tab10.png'),
          imgOn: require('../imgs/bar_tab10on.png'),
        },
        {
          name: '技术评定',
          value: PAGE_ASSESS,
          img: require('../imgs/bar_tab9.png'),
          imgOn: require('../imgs/bar_tab9on.png'),
        },
        {
          name: '自动监测',
          value: PAGE_MONITOR,
          img: require('../imgs/bar_tab8.png'),
          imgOn: require('../imgs/bar_tab8on.png'),
        },
        // {
        //   name: '隐患排查',
        //   value: PAGE_TROUBLESHOOT,
        //   img: require('../imgs/bar_tab2.png'),
        //   imgOn: require('../imgs/bar_tab2on.png'),
        // },

        // {
        //   name: '风险评估',
        //   value: PAGE_RISK,
        //   img: require('../imgs/bar_tab1.png'),
        //   imgOn: require('../imgs/bar_tab1on.png'),
        // },
        // {
        //   name: '养护管理',
        //   value: PAGE_MAINTENANCE,
        //   img: require('../imgs/bar_tab6.png'),
        //   imgOn: require('../imgs/bar_tab6on.png'),
        // },

      ]
    }
  },
  watch: {
    tabValue (value, oldValue) {
      this.oldTabValue = oldValue
    }
  },
  methods: {
    goToPage (name,tabName) {
      if(name === this.$route.name){
        return
      }
      if(name=='monitors'){
        this.$emit('changeMap')
      }
      this.$router.push({ name:name, params: { deptTreeId: this.deptTreeId,roadId:this.roadId,slopeId:this.slopeId } })
    }
  }
}
</script>

<style lang="less" scoped>
.tabbar {
  display: inline-flex;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: 12%;
  background-image: url(../imgs/footer.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

.tabbar-item {
  width: 3.75rem /* 60/16 */;
  height: 84%;
  display: block;
  /* flex: 1; */
  /* padding: 5px 0 0; */
  font-size: 0;
  color: #f6f6f6;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* perspective: 30px; */
  transform-style: preserve-3d;
  &:not(:last-child) {
    margin-right: 1.5rem /* 24/16 */;
  }
}

.add-animate {
  transition: all 1s;
  animation-name: rotateDown;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.remove-animate {
  transition: all 1s;
  animation-name: rotateUp;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

@keyframes rotateUp {
  0% {
    transform: rotateX(-90deg);
  }
  70% {
    transform: rotateX(10deg);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes rotateDown {
  0% {
    transform: rotateX(0);
  }
  50% {
    transform: rotateX(-100deg);
  }
  100% {
    transform: rotateX(-90deg);
  }
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

/* 前面 */
.child-1 {
  width: 100%;
  height: 100%;
  transform: translateZ(50%);
  /* z-index: 1000; */
}

/* 后面 */
.child-2 {
  width: 100%;
  height: 100%;
  transform: translateZ(-50%);
}

/* 上面 */
.child-3 {
  width: 100%;
  height: 100%;
  transform: translateY(50%) rotateX(90deg);
  /* border: 1px #000 solid; */
}

/* 下面 */
.child-4 {
  width: 100%;
  height: 100%;
  transform: translateY(-50%) rotateX(90deg);
  /* border: 1px #000 solid; */
}

/* 左面 */
.child-5 {
  width: 100%;
  height: 100%;
  transform: translateX(50%) rotateY(90deg);
  /* border: 1px #000 solid; */
}

/* 右面 */
.child-6 {
  width: 100%;
  height: 100%;
  transform: translateX(-50%) rotateY(90deg);
  /* border: 1px #000 solid; */
}

.tabbar-icon {
  display: inline-block;
  width: 100%;
  margin: 0 0 8%;
}
.tabbar-icon  img {
  width: 90%;
}

.tabbar-label {
  text-align: center;
  color: #f6f6f6;
  font-size: 1rem;
  line-height: 1.5;
  white-space: nowrap;
  /* padding-bottom: 5px; */
}
</style>
